@extends('layouts.app')

@section('content')
    <div class="container mx-auto flex">
        <div class=" w-full mt-4 lg:w-3/4">
            <div class="flex items-center flex-row justify-content-between w-full">
                <button class="btn btn-active btn-neutral btn-sm mr-6">图书</button>
                <ul class="flex gap-2 ">
                    <li><a
                            @if($sort =='new')
                                class="text-blue-500"
                            @endif
                            href="/?sort=new">最新</a></li>
                    <li><a @if($sort =='borrow')
                               class="text-blue-500"
                           @endif
                           href="/?sort=borrow">借阅量</a></li>
                    <li><a
                            @if($sort =='view')
                                class="text-blue-500"
                            @endif
                            href="/?sort=view">浏览量</a></li>
                </ul>
            </div>
            <div class="grid md:grid-cols-3 md:grid-cols-3 xl:grid-cols-4  gap-4 pt-4">
                @foreach($dataList as $item)
                    <a class="card w-100 bg-base-100 shadow-xl cursor-pointer "  href="/book/{{ $item->id }}">
                        <figure class="relative"><img src="/{{ $item->cover }}"
                                                      alt="Shoes"/>
                            <span
                                class="inline text-md absolute bottom-0 left-0  rounded-r  bg-green-500 text-white px-2 py-1"># {{ $item->category->name }}</span>
                            <span
                                class="inline text-md absolute bottom-0 right-0 bg-blue-500 rounded-l text-white px-2 py-1"> 余{{ $item->stock }}</span>
                        </figure>

                        <div class="card-body p-4">
                            <h2 class="text-md font-bold">{{ $item->title }}</h2>
                            <span class="text-sm">{{ $item->author }}著</span>
                            <span class="text-sm"> {{ $item->publisher }}</span>

                        </div>
                    </a>
                @endforeach



            </div>

            <div class="flex justify-center mt-6">
                <a href="/categorySearch" class="btn btn-primary btn-sm " >查看更多 ></a>
            </div>
        </div>
        <div class="w-1/4 p-4 hidden lg:block">

            <div class="bg-base-100 dark:bg-slate-800 mt-4 p-4 rounded-2xl">
                <button class="btn btn-active btn-neutral btn-sm mb-2">系统公告</button>
                <ul class="list-decimal px-4">
                    @foreach($ad as $item)
                        <li class="text-ellipsis"><a href="/ad/{{ $item->id }}" class="text-green-700">{{ $item->title }}</a></li>
                    @endforeach
                </ul>
            </div>

            <div class="card w-100 bg-base-100 shadow-xl mt-4">
                <figure>
                    <img src="/assets/images/user.png" alt="Shoes"/>
                </figure>
                <div class="card-body items-center py-4">
                    @guest

                        <h2 class="text-20 text-red-500 mb-2">您还未登录!</h2>
                        <div class="flex justify-center">
                            <a href="/register" class="btn text-white btn-sm btn-info  mr-8">
                                <svg t="1711608722779" class="w-4 h-4" viewBox="0 0 1024 1024" version="1.1"
                                     xmlns="http://www.w3.org/2000/svg" p-id="5296" width="200" height="200">
                                    <path
                                        d="M452.096 458.752c-108.032 0-196.096-85.504-196.096-190.976s88.064-190.464 196.096-190.464c108.032 0 196.096 85.504 196.096 190.976s-87.552 190.464-196.096 190.464z m0-321.536c-74.752 0-135.168 58.368-135.168 130.048 0 72.192 60.928 130.048 135.168 130.048s135.168-58.368 135.168-130.048-60.416-130.048-135.168-130.048z m378.368 718.848c-16.384 0-30.208-13.824-30.208-30.208 0-130.56-87.552-270.848-333.824-270.848-161.28 0-333.824 71.168-333.824 270.848 0 16.384-13.824 30.208-30.208 30.208s-30.208-13.824-30.208-30.208c0-104.448 40.96-190.976 118.272-249.856 70.144-53.248 164.864-81.408 275.968-81.408s205.824 28.16 275.968 81.408c77.312 59.392 118.272 145.92 118.272 249.856 0 16.384-13.824 30.208-30.208 30.208z"
                                        p-id="5297" fill="#ffffff"></path>
                                    <path
                                        d="M837.632 859.648h-743.424c-12.288 0-22.528-10.24-22.528-22.528v-9.728c0-12.288 10.24-22.528 22.528-22.528h743.424c12.288 0 22.528 10.24 22.528 22.528v9.728c0 12.8-10.24 22.528-22.528 22.528zM925.184 308.736h-180.736c-15.872 0-29.184-13.312-29.184-29.184s13.312-29.184 29.184-29.184h180.736c15.872 0 29.184 13.312 29.184 29.184-0.512 16.384-13.312 29.184-29.184 29.184z"
                                        p-id="5298" fill="#ffffff"></path>
                                    <path
                                        d="M863.744 189.44v180.736c0 15.872-13.312 29.184-29.184 29.184s-29.184-12.8-29.184-29.184V189.44c0-15.872 13.312-29.184 29.184-29.184s29.184 13.312 29.184 29.184z"
                                        p-id="5299" fill="#ffffff"></path>
                                </svg>
                                注册
                            </a>
                            <a href="/login" class="btn text-white btn-sm btn-primary ">
                                <svg t="1711608932057" class="w-4 h-4" viewBox="0 0 1024 1024" version="1.1"
                                     xmlns="http://www.w3.org/2000/svg" p-id="6334" width="200" height="200">
                                    <path
                                        d="M832 896H298.666667a104.533333 104.533333 0 0 1-106.666667-102.4v-101.973333h53.333333v102.826666A52.48 52.48 0 0 0 298.666667 845.653333h533.333333a52.48 52.48 0 0 0 53.333333-51.2V229.546667a52.48 52.48 0 0 0-53.333333-51.2H298.666667a52.48 52.48 0 0 0-53.333334 51.2v102.826666H192V229.546667A104.533333 104.533333 0 0 1 298.666667 128h533.333333A104.533333 104.533333 0 0 1 938.666667 229.546667v564.906666A104.533333 104.533333 0 0 1 832 896zM601.173333 352a25.6 25.6 0 0 1 0-36.693333 27.733333 27.733333 0 0 1 37.546667 0l184.32 177.066666a30.293333 30.293333 0 0 1 0 39.253334L640 708.693333a27.733333 27.733333 0 0 1-37.546667 0 25.173333 25.173333 0 0 1 0-36.266666l139.946667-134.826667H112.213333a25.6 25.6 0 1 1 0-51.2h628.906667z"
                                        fill="#ffffff" p-id="6335"></path>
                                </svg>
                                登录
                            </a>
                        </div>

                    @else
                        <h2 class="text-20 text-blue-500 font-bold mb-2">欢迎您!</h2>
                        <h2 class="text-20 text-red-500 mb-2">{{ auth()->user()->nickname }}</h2>
                        <h2 class="text-20 text-blue-500 mb-2 flex ">  {{ auth()->user()->level->name }}  <img style="width: 60px" class="ml-4" src="{{ auth()->user()->level->icon }}" alt=""></h2>
                    @endguest
                </div>
            </div>

            <div class="bg-base-100 dark:bg-slate-800 mt-4 p-4 rounded-2xl">
                <button class="btn btn-active btn-neutral btn-sm mb-2">最新借阅</button>
                <ul>
                    @foreach($records as $item)
                    <li class="text-ellipsis"><span class="text-green-700">{{ $item->user->nickname }}</span> 于 {{ $item->created_at->diffforHumans() }} 借走了 <a href="/book/{{ $item->book->id }}" class="text-blue-700">《{{ $item->book->title }}》</a></li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    <div class="container mx-auto">
        <button class="btn btn-active btn-neutral btn-sm mt-4">借阅排行</button>
        <div
            class="bg-white dark:bg-slate-800 grid md:grid-cols-3 md:grid-cols-3 xl:grid-cols-4  gap-4 mt-4 rounded-2xl p-4 w-full">

            @foreach($borrowSort as $k =>$book)
                <a href="/book/{{ $book->id }}" class="flex flex-row justify-content-between items-center w-full">
                    <p class="grow">{{$k+1}}.  {{ $book->title  }}</p>
                    <p class="mr-4">{{ $book->borrow_num }}次</p>
                </a>
            @endforeach

        </div>

    </div>
@endsection
